<template>
  <div class="home-header">
    <div class="header-city" @click="toCity">
      上海
      <van-icon name="arrow-down" />
    </div>
    <div class="header-search">
      <router-link to="/search"
        ><van-config-provider :theme-vars="themeVars">
          <van-search
            disabled
            placeholder="请输入商家名、品类或者商圈"
            background="#ffc400"
          />
        </van-config-provider>
      </router-link>
    </div>
    <router-link to="/mine">
      <section class="operate-wrap">
        <img
          class="operate-btn"
          src="https://p0.meituan.net/travelcube/641521461179df7cfb88738dd1ea11ec1031.png"
        /></section
    ></router-link>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();
const themeVars = {
  searchPadding: "0",
  // searchInputHeight:'8.5vw',
  searchLabelFontSize: "3.5vw",
  searchLabelColor: "#999",
  searchActionTextColor: "#999",
};
const toCity = () => {
  router.push("/city");
};
</script >

<style lang="less" scoped>
@import "@/assets/styles/less";
.home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  height: 13.3vw;
  padding: 0 4vw;
  background: @theme-color;
  .header-city {
    /* display: flex; */
    margin-right: 4vw;
    font-size: 3.7vw;
  }
  .header-search {
    flex: 1;
    border-radius: 2.1vw;
  }
  .operate-wrap {
    margin-left: 4vw;
  }
}
</style>